<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>前后端的交互</title>
		<script src="./jquery-3.6.0.min.js"></script>
		<script>
			$(function(){
				/* data参数的传递：1.对象的方式实现数据的传参
				语法：{key：value，key2：value2}
				 2.拼接字符串的方式
				 语法：key1=value1&key2=value2*/
			 $.ajax({
				 type: "get",
				 
				 url: "http://localhost:8090/findAll",
				 data: {id:100,name:"tom",age:18},
				 //data: "id=100&name=tom&age=18",
				 success: function(data){
					// for(var i=0;i<data.length;i++){
					// 	console.log(data[i])
					// }
					//JS原生函数 in 关键字遍历的是下标
					// for(index in data){
					// 	console.log(data[index])
					// }
					for(user of data){
						// let id = user.id
						// let name = user.name
						// let age = user.sex
						// let sex = user.sex
						console.log(name)
						let tr = `<tr align='center'><td>${user.id}</td><td>${user.name}</td><td>${user.age}</td><td>${user.sex}</td><td>
						<input type='button' value='修改'></input>
					 </td></tr>`
						//将指定的元素进行追加
						$("#tab1").append(tr)
						
					}
					
				 }
			 })
		})
		</script>
	</head>
	<body>
		<table id="tab1" border="1px" width="80%" align="center">
			<tr align="center" height="60px">
				<th colspan="5"><h1>用户列表</h1></th>
			</tr>
			<tr align="center" height="60px">
				
				<th>编号</th>
				<th>名称</th>
				<th>年龄</th>
				<th>性别</th>
				<th>操作</th>
			</tr>
		</table>
	</body>
</html>
